<template>
	<view class="activity-container">
		<!-- 活动卡片 -->
		<view class="activity-card">
			<!-- 选项卡 -->
			<view class="tab-container">
				<view 
					class="tab-item" 
					:class="{ active: currentTab === 'published' }"
					style="border-radius: 20px 0 0 20px;"
					@click="switchTab('published')"
				>已上架</view>
				<view 
					class="tab-item" 
					:class="{ active: currentTab === 'unpublished' }"
					style="border-radius: 0 20px 20px 0;"
					@click="switchTab('unpublished')"
				>未上架</view>
			</view>

			<!-- 活动列表 -->
			<view class="activity-list">
				<view class="activity-item" v-for="(item, index) in currentList" :key="index">
					<view class="activity-content">
						<view class="activity-title">{{item.title}}</view>
						<view class="status-row">
							<text class="status" :class="item.status.class">{{item.status.text}}</text>
							<text class="activity-time">{{item.time}}</text>
						</view>
					</view>
					<view class="action-btn" :class="item.btnClass">{{item.btnText}}</view>
				</view>
			</view>
		</view>

		<!-- 底部发布按钮 -->
		<view class="publish-btn" @click="goToPublish">
			<image class="plus-icon" src="/static/加号@2x.png" mode="aspectFit"></image>
			<text>发布活动</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 'published',
				publishedList: [
					{
						title: '阳春三月油江南活动开始报名了',
						time: '2023-03-10 11:09',
						btnText: '下架',
						btnClass: 'btn-delete'
					}
				],
				unpublishedList: [
					{
						title: '阳春三月油江南活动开始报名了',
						time: '2023-03-10 11:09',
						status: {
							text: '审核中',
							class: 'status-pending'
						},
						btnText: '删除',
						btnClass: 'btn-delete'
					},
					{
						title: '阳春三月油江南活动开始报名了',
						time: '2023-03-10 11:09',
						status: {
							text: '审核成功',
							class: 'status-success'
						},
						btnText: '上架',
						btnClass: 'btn-publish'
					},
					{
						title: '阳春三月油江南活动开始报名了',
						time: '2023-03-10 11:09',
						status: {
							text: '审核失败',
							class: 'status-failed'
						},
						btnText: '删除',
						btnClass: 'btn-delete'
					}
				]
			}
		},
		computed: {
			currentList() {
				return this.currentTab === 'published' ? this.publishedList : this.unpublishedList;
			}
		},
		methods: {
			switchTab(tab) {
				this.currentTab = tab
			},
			goToPublish() {
				uni.navigateTo({
					url: '/packagesActivity/publish/publish'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.activity-container {
	min-height: 100vh;
	background-color: #F7F7F7;
	margin: 15px;
	border-radius: 15px;
}

.activity-card {
	background-color: #fff;
	border-radius: 15px;
	overflow: hidden;
}

.tab-container {
	display: flex;
	padding: 15px 70px;
	background: #fff;
	margin: 15px;
	margin-bottom: 0px;
	border-bottom: 4px solid #F7F7F7;
	
	.tab-item {
		flex: 1;
		text-align: center;
		padding: 8px 0;
		font-size: 14px;
		color: #2979FF;
		background-color: #F2F2F2;
		
		&.active {
			background-color: #2979FF;
			color: #fff;
		}
	}
}

.activity-list {
	.activity-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px;
		border-top: 1px solid #F7F7F7;
		
		&:last-child {
			border-bottom: none;
		}
		
		.activity-content {
			flex: 1;
			margin-right: 10px;
			
			.activity-title {
				font-size: 14px;
				margin: 5px 0 5px 0;
				color: #333;
			}
			
			.status-row {
				display: block;
				
				.status {
					font-size: 12px;
					display: block;
					margin-bottom: 5px;
					
					&.status-pending {
						color: #FF9900;
					}
					
					&.status-success {
						color: #52C41A;
					}
					
					&.status-failed {
						color: #FF4D4F;
					}
				}
				
				.activity-time {
					font-size: 12px;
					color: #999;
					display: block;
				}
			}
		}
		
		.action-btn {
			padding: 5px 25px;
			color: #fff;
			border-radius: 25px;
			font-size: 14px;
			
			&.btn-delete, &.btn-publish {
				background-color: #0863E7;
			}
		}
	}
}

.publish-btn {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	background-color: #0052d9;
	color: #fff;
	padding: 12px 0;
	width: 70%;
	border-radius: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
	font-size: 14px;
	
	.plus-icon {
		width: 13px;
		height: 13px;
	}
}
</style>
